<template>
    <div class="history-con">
        <div class="head">
            <p class="head-title">历史森林火灾数据</p>
        </div>
        <img src="../src/assets/static/image/bg2.png" alt="" class="bg">
        <div class="container">
            <!-- 左边模块 -->
            <div class="con-left">
                <div class="history-total">
                    <!-- 模块标题 -->
                    <div class="small-title">
                        <div class="small-title-left">
                            <div class="bar"></div>
                            <p>火灾发生次数统计</p>
                        </div>
                        <div class="small-title-right">
                            <img src="../src/assets/static/image/trend.png" alt="" class="icon">
                        </div>
                    </div>
                    <div class="total-con">
                        <div class="total-item">
                            <img src="../src/assets/static/image/size-bg.png" alt="">
                            <div class="total-item-value">423</div>
                            <div class="total-item-title">发生火灾总数</div>
                        </div>
                        <div class="total-item">
                            <img src="../src/assets/static/image/size-bg.png" alt="">
                            <div class="total-item-value">6</div>
                            <div class="total-item-title">月平均发生次数</div>
                        </div>
                        <div class="total-item">
                            <img src="../src/assets/static/image/size-bg.png" alt="">
                            <div class="total-item-value">71</div>
                            <div class="total-item-title">年平均发生次数</div>
                        </div>
                    </div>
                </div>
                <div class="trend">
                    <!-- 模块标题 -->
                    <div class="small-title">
                        <div class="small-title-left">
                            <div class="bar"></div>
                            <p>火灾发生次数统计</p>
                        </div>
                        <div class="small-title-right">
                            <img src="../src/assets/static/image/trend.png" alt="" class="icon">
                        </div>
                    </div>
                    <div class="trend-con">
                        <div id="trend" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
            </div>
            <!-- 中间模块 -->
            <div class="info">
                <!-- 模块标题 -->
                <div class="small-title">
                    <div class="small-title-left">
                        <div class="bar"></div>
                        <p>火灾详情</p>
                    </div>
                    <div class="small-title-right">
                        <img src="../src/assets/static/image/trend.png" alt="" class="icon">
                    </div>
                </div>
                <div class="info-con">
                    <div class="head-time">
                        <img src="../src/assets/static/image/btn1-active.png" alt="">
                        <div class="head-time-value">该数据来源2023年10月10日</div>
                    </div>
                    <div class="info-con-main">
                        <div class="thisdeplete">
                            <div class="thisdeplete-title">该次火灾资源消耗情况</div>
                            <div id="Tdeplete" style="width: 100%;height: 100%;"></div>
                        </div>
                        <!-- 火灾信息面板 -->
                        <div class="info-banel">
                            <div class="info-banel-title">火灾信息面板</div>
                            <div class="info-banel-con">
                                <div class="info-item">
                                    <div class="info-item-title">上报人员:</div>
                                    <div class="info-item-value">陈先生</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-item-title">联系方式:</div>
                                    <div class="info-item-value">12345678999</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-item-title">发生地点:</div>
                                    <div class="info-item-value">一区</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-item-title">火灾面积:</div>
                                    <div class="info-item-value">2000m²</div>
                                </div>
                                <!-- 轻微，中等，严重 -->
                                <div class="info-item">
                                    <div class="info-item-title">火灾程度:</div>
                                    <div class="info-item-value">中等</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-item-title">火灾原因:</div>
                                    <div class="info-item-text">
                                        <div class="info-text-value">
                                            因为天气炎热，森林自然起火，森林受损面积过大，防火设备难以加以补给。因为天气炎热，森林自然起火，森林受损面积过大，防火设备难以加以补给。因为天气炎热，森林自然起火，森林受损面积过大，防火设备难以加以补给。因为天气炎热，森林自然起火，森林受损面积过大，防火设备难以加以补给。
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 选择时间查询 -->
                    <div class="option-con">
                        <div class="option-item">全部</div>
                        <timerpicker :typevalue="'year'" :list="yearlist" @update:selected="handelYearChanged"
                            v-model:selected="selectedYear"></timerpicker>
                        <timerpicker :typevalue="'month'" :list="monthlist" @update:selected="handelMonthChanged"
                            v-model:selected="selectedMonth"></timerpicker>
                        <timerpicker :typevalue="'date'" :list="datelist" v-model:selected="selectedDay"></timerpicker>
                    </div>
                    <div class="list-con">
                        <div class="list-title">
                            <div class="list-title-item">
                                <img src="../src/assets/static/image/time.png" alt="" class="item-icon">
                                <div>火灾时间</div>
                            </div>
                            <div class="list-title-item">
                                <img src="../src/assets/static/image/location.png" alt="" class="item-icon">
                                <div>火灾地点</div>
                            </div>
                            <div class="list-title-item">
                                <img src="../src/assets/static/image/area2.png" alt="" class="item-icon">
                                <div>火灾面积</div>
                            </div>
                            <div class="list-title-item">
                                <img src="../src/assets/static/image/level.png" alt="" class="item-icon">
                                <div>火灾程度</div>
                            </div>
                            <div class="list-title-item">
                                <img src="../src/assets/static/image/options.png" alt="" class="item-icon">
                                <div>操作</div>
                            </div>
                        </div>
                        <div class="lists">
                            <div class="list-main">
                                <div class="list-item">
                                    <div class="list-item-value">
                                        2023年10月12日
                                    </div>
                                    <div class="list-item-value">
                                        一区
                                    </div>
                                    <div class="list-item-value">
                                        23km²
                                    </div>
                                    <div class="list-item-value">
                                        严重
                                    </div>
                                    <div class="list-item-value">
                                        <div class="option">查看</div>
                                    </div>
                                </div>
                                <div class="list-item">
                                    <div class="list-item-value">
                                        2023年10月11日
                                    </div>
                                    <div class="list-item-value">
                                        二区
                                    </div>
                                    <div class="list-item-value">
                                        56km²
                                    </div>
                                    <div class="list-item-value">
                                        严重
                                    </div>
                                    <div class="list-item-value">
                                        <div class="option">查看</div>
                                    </div>
                                </div>
                                <div class="list-item">
                                    <div class="list-item-value">
                                        2023年09月10日
                                    </div>
                                    <div class="list-item-value">
                                        一区
                                    </div>
                                    <div class="list-item-value">
                                        8km²
                                    </div>
                                    <div class="list-item-value">
                                        普通
                                    </div>
                                    <div class="list-item-value">
                                        <div class="option">查看</div>
                                    </div>
                                </div>
                                <div class="list-item">
                                    <div class="list-item-value">
                                        2023年09月10日
                                    </div>
                                    <div class="list-item-value">
                                        三区
                                    </div>
                                    <div class="list-item-value">
                                        90km²
                                    </div>
                                    <div class="list-item-value">
                                        严重
                                    </div>
                                    <div class="list-item-value">
                                        <div class="option">查看</div>
                                    </div>
                                </div>
                                <div class="list-item">
                                    <div class="list-item-value">
                                        2023年10月11日
                                    </div>
                                    <div class="list-item-value">
                                        二区
                                    </div>
                                    <div class="list-item-value">
                                        67km²
                                    </div>
                                    <div class="list-item-value">
                                        普通
                                    </div>
                                    <div class="list-item-value">
                                        <div class="option">查看</div>
                                    </div>
                                </div>
                                <div class="list-item">
                                    <div class="list-item-value">
                                        2023年10月11日
                                    </div>
                                    <div class="list-item-value">
                                        一区
                                    </div>
                                    <div class="list-item-value">
                                        55km²
                                    </div>
                                    <div class="list-item-value">
                                        严重
                                    </div>
                                    <div class="list-item-value">
                                        <div class="option">查看</div>
                                    </div>
                                </div>
                                <div class="list-item">
                                    <div class="list-item-value">
                                        2023年09月11日
                                    </div>
                                    <div class="list-item-value">
                                        一区
                                    </div>
                                    <div class="list-item-value">
                                        100km²
                                    </div>
                                    <div class="list-item-value">
                                        严重
                                    </div>
                                    <div class="list-item-value">
                                        <div class="option">查看</div>
                                    </div>
                                </div>
                                <div class="list-item">
                                    <div class="list-item-value">
                                        2023年09月10日
                                    </div>
                                    <div class="list-item-value">
                                        一区
                                    </div>
                                    <div class="list-item-value">
                                        100km²
                                    </div>
                                    <div class="list-item-value">
                                        普通
                                    </div>
                                    <div class="list-item-value">
                                        <div class="option">查看</div>
                                    </div>
                                </div>
                                <div class="list-item">
                                    <div class="list-item-value">
                                        2023年10月11日
                                    </div>
                                    <div class="list-item-value">
                                        一区
                                    </div>
                                    <div class="list-item-value">
                                        100km²
                                    </div>
                                    <div class="list-item-value">
                                        严重
                                    </div>
                                    <div class="list-item-value">
                                        <div class="option">查看</div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="con-right">
                <!-- 设备消耗程度 -->
        <div class="allconsumption">
            <!-- 模块标题 -->
            <div class="small-title">
                <div class="small-title-left">
                    <div class="bar"></div>
                    <p>设备消耗程度</p>
                </div>
                <div class="small-title-right">
                    <img src="../src/assets/static/image/trend.png" alt="" class="icon">
                </div>
            </div>
            <div class="allconsumption-con">
                <div id="allconsumption" style="width: 100%;height: 100%;"></div>
            </div>
        </div>
        <!-- 总体火灾存在风险评估 -->
        <div class="assess">
            <!-- 模块标题 -->
            <div class="small-title">
                <div class="small-title-left">
                    <div class="bar"></div>
                    <p>总体火灾存在风险评估</p>
                </div>
                <div class="small-title-right">
                    <img src="../src/assets/static/image/trend.png" alt="" class="icon">
                </div>
            </div>
            <div class="assess-con">
                <div class="fire-sum">
                    <div class="fire-sum-title">本年度存在的火灾次数为:</div>
                    <div class="fire-sum-value">
                        <img src="../src/assets/static/image/statusbg.png" alt="">
                        <div class="sum-value">423</div>
                    </div>
                </div>
                <div class="assess-sum">
                    <div class="assess-sum-title">风险预估评定为:</div>
                    <div class="assess-sum-value">
                        <img src="../src/assets/static/image/statusbg.png" alt="">
                        <div class="assess-value">中</div>
                    </div>
                </div>
                <div class="recommand">
                    <div>系统评价建议:</div>
                    <div>需要加以优化险情，减少火灾的发生！</div>
                </div>
            </div>
        </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';
import timerpicker from '../components/timerpicker.vue'

onMounted(() => {
    initChart();
    initChart2();
    initChart3();
    initdate();
    // getDaysInYearMonth(2024,2);
});




// 初始化日期
function initdate() {
    getyearlist();
    getmonthlist();
    var date = new Date();
    selectedYear.value = date.getFullYear();
    selectedMonth.value = date.getMonth() + 1 > 10 ? date.getMonth() + 1 : '0' + date.getMonth() + 1;
    selectedDay.value = date.getDate() ? date.getDate() : '0' + date.getDate()
    getdatelist(selectedYear.value, selectedMonth.value)
}

function handelYearChanged(newYear) {
    console.log("changed year");
    selectedYear.value = newYear
    getdatelist(newYear, selectedMonth.value)
}
function handelMonthChanged(newMonth) {
    console.log("changed month");
    selectedMonth.value = newMonth
    getdatelist(selectedYear.value, newMonth)
}
//被选择的年
var selectedYear = ref("2023");
// 获取年份数组
var yearlist = ref([]);
function getyearlist() {
    // 初始年份
    var date = new Date()
    var year = date.getFullYear()
    for (var i = 2020; i <= year; i++) {
        var obj = {
            id: i,
            text: i
        }
        yearlist.value.push(obj)
    }
}
//被选择的月
var selectedMonth = ref('01');
// 获取月份数组
var monthlist = ref([]);
function getmonthlist() {
    for (var i = 1; i <= 12; i++) {
        i = i < 10 ? '0' + i : i
        var obj = {
            id: i,
            text: i
        }
        monthlist.value.push(obj)
    }
}
//被选择的日
var selectedDay = ref('03');
// 获取日期数组
var datelist = ref([]);
function getdatelist(year, month) {
    datelist.value = []
    console.log(year, month);
    month = parseInt(month, 10);
    var date = new Date(year, month, 0);
    for (var i = 1; i <= date.getDate(); i++) {
        var obj = {
            id: i,
            text: i < 10 ? '0' + i : i
        }
        datelist.value.push(obj)
    }
}

onUnmounted(() => {
    // myEcharts.dispose;
    // myEcharts2.dispose;
});


function initChart() {
    var myEcharts = echarts.init(document.getElementById('trend'), "purple-passion");
    // 指定图表的配置项和数据
    //图表X轴数据
    var Xdata = ["一月", "二月", "三月", "四月", "五月", "六月", "七月",
        "八月", "九月", "十月", "十一月", "十二月"
    ];
    var fp_jzrk = {
        2000: [589, 259, 262, 324, 232, 176, 196, 214, 133, 370, 120, 150],
        2005: [511, 315, 139, 375, 204, 352, 163, 258, 385, 209, 100, 159],
        2010: [527, 210, 328, 292, 241, 110, 130, 185, 392, 392, 220, 222],
        2015: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250, 280, 130],
        2020: [580, 128, 255, 254, 313, 143, 360, 343, 338, 163, 125, 250]
    };
    var fp_jzfyb = {
        2000: [589, 259, 262, 324, 232, 176, 196, 214, 133, 370, 120, 150],
        2005: [511, 315, 139, 375, 204, 352, 163, 258, 385, 209, 100, 159],
        2010: [527, 210, 328, 292, 241, 110, 130, 185, 392, 392, 220, 222],
        2015: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250, 280, 130],
        2020: [580, 128, 255, 254, 313, 143, 360, 343, 338, 163, 125, 250]
    };
    //图表月份
    var timeLineData = [2000, 2005, 2010, 2015, 2020];
    var option = {
        baseOption: {
            backgroundColor: "transparent",
            timeline: {
                show: true,
                axisType: 'category',
                tooltip: {
                    show: true,
                    formatter: function (params) {
                        return params.name + '月份数据统计';
                    }
                },
                autoPlay: true,
                currentIndex: 10,
                playInterval: 2000,
                label: {
                    normal: {
                        show: true,
                        color: '#20dbfd',
                        interval: 'auto',
                        formatter: function (params) {
                            return params
                        }
                    },
                },
                lineStyle: {
                    show: true,
                    color: '#20dbfd'
                },
                itemStyle: {
                    show: true,
                    color: '#20dbfd'
                },
                controlStyle: {
                    show: true,
                    color: '#20dbfd',
                    borderColor: '#20dbfd'
                },
                left: "0",
                right: "0",
                bottom: '0',
                padding: [15, 0],
                data: timeLineData,
            },
            title: {
                textStyle: {
                    color: '#fff',
                    fontSize: 16,
                },
            },
            tooltip: {
                show: true,
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                }
            },
            grid: {
                top: "10%",
                left: "3%",
                right: "7%",
                bottom: "10%",
                containLabel: true
            },

            xAxis: [{
                type: 'category',
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    formatter: function (val) {
                        var strs = val.split(''); //字符串数组
                        var str = ''
                        for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
                            str += s;
                            if (!(i % 2)) str += '\n'; //按需要求余
                        }
                        return str
                    },
                    textStyle: {
                        color: '#B2B2B2',
                        fontSize: 12,
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                        width: 1,
                    },
                },
                data: Xdata,
            }],
            yAxis: [{
                type: 'value',
                name: "(次)",
                nameTextStyle: {
                    color: "#fff",
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    },

                }
            },
            {
                type: 'value',
                name: "",
                nameTextStyle: {
                    color: "#fff",
                },
                position: "right",
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    },

                }
            }
            ]
        },
        options: []
    };
    for (var i = 0; i < timeLineData.length; i++) {
        option.options.push({
            series: [{
                name: '次数',
                type: 'bar',
                barWidth: '20%',
                label: {
                    normal: {
                        show: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        },
                    },
                    emphasis: {
                        show: false,
                        offset: [0, 0],
                        textStyle: {
                            color: '#fff'
                        },
                    },
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0,244,255,1)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                    }], false),
                    barBorderRadius: [30, 30, 30, 30],
                    shadowColor: 'rgba(0,160,221,1)',
                    shadowBlur: 4,
                    emphasis: {
                        opacity: 1,
                    },
                },
                data: fp_jzrk[timeLineData[i]],
            },
            {
                name: "次数",
                type: "line",
                yAxisIndex: 1,
                smooth: true, //平滑曲线显示
                showAllSymbol: true, //显示所有图形。
                symbol: "circle", //标记的图形为实心圆
                symbolSize: 8, //标记的大小
                itemStyle: {
                    color: "#2196f3",
                    borderColor: "#2196f3",
                },
                lineStyle: {
                    color: "#2196f3",
                    shadowColor: "#2196f3",
                    shadowBlur: 4
                },
                data: fp_jzfyb[timeLineData[i]]
            },
            ]
        });
    }

    // 使用刚指定的配置项和数据显示图表。
    myEcharts.setOption(option);
}


function initChart2() {
    var myEcharts2 = echarts.init(document.getElementById('Tdeplete'), "purple-passion");

    var option = {
        backgroundColor: "transparent",
        tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0,0,0,.6)",
            borderColor: "rgba(147, 235, 248, 0)",
            textStyle: {
                color: "#FFF",
            },
            // axisPointer: {
            // 	type: "shadow",
            // 	label: {
            // 		show: true,
            // 	},
            // },
        },
        grid: {
            left: "10%",
            top: "18%",
            right: "5%",
            bottom: "25%",
        },
        legend: {
            top: "4%",
            left: '75%',
            "itemWidth": 13,
            "itemHeight": 13,
            itemStyle: {
                color: "#18A4FF"
            },
            "icon": "rect",
            "padding": 0,
            textStyle: {
                "color": "#c0c3cd",
                fontSize: 13,
                "padding": [2, 0, 0, 0]
            }
        },
        xAxis: {
            data: ["消防车", "灭火器", "巡护人员", "瞭望塔", "无人机", "传感器"],

            axisLine: {
                show: true, //隐藏X轴轴线
                lineStyle: {
                    color: "#163a5f",
                    width: 2,
                },
            },
            axisTick: {
                show: false, //隐藏X轴刻度
                alignWithLabel: true,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#BDD8FB", //X轴文字颜色
                    fontSize: 12,
                },
                interval: 0,
                formatter: function (value) {
                    var ret = ""; //拼接加\n返回的类目项
                    var maxLength = 4; //每项显示文字个数
                    var valLength = value.length; //X轴类目项的文字个数
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                    if (rowN > 1) {
                        //如果类目项的文字大于5,
                        for (var i = 0; i < rowN; i++) {
                            var temp = ""; //每次截取的字符串
                            var start = i * maxLength; //开始截取的位置
                            var end = start + maxLength; //结束截取的位置
                            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                            temp = value.substring(start, end) + "\n";
                            ret += temp; //凭借最终的字符串
                        }
                        return ret;
                    } else {
                        return value;
                    }
                },
            },
        },
        yAxis: [
            {
                type: "value",
                name: "",
                nameTextStyle: {
                    color: "#BDD8FB",
                    fontSize: 12,
                },

                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.15)",
                        type: 'dashed', // dotted 虚线
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true, //隐藏X轴轴线
                    lineStyle: {
                        color: "#163a5f",
                        width: 1,
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#BDD8FB",
                        fontSize: 12,
                    },
                },
            },
            {
                type: "value",
                name: "",
                nameTextStyle: {
                    color: "#BDD8FB",
                    fontSize: 12,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        width: 1,
                        color: "#CED2DB",
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false, //隐藏X轴轴线
                    lineStyle: {
                        color: "#163a5f",
                        width: 2,
                    },
                },
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: "#797A7F",
                        fontSize: 12,
                    },
                },
            },
        ],
        series: [
            {
                name: "消耗数量",
                type: "bar",
                barWidth: 15,
                itemStyle: {
                    // color: new graphic.LinearGradient(0, 0, 0, 1, [
                    //    {
                    //       offset: 0,
                    //       color: "#00A2FF",
                    //    },
                    //    {
                    //       offset: 1,
                    //       color: "#00CCD2",
                    //    },
                    // ]),
                    color: {
                        type: 'linear',
                        x: 0,  //右
                        y: 0,  //下
                        x2: 0,  //左
                        y2: 1,  //上
                        colorStops: [
                            {
                                offset: 0.1,
                                color: '#13D5FC' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#2059B8' // 100% 处的颜色
                            }
                        ]
                    },
                    barBorderRadius: [20, 20, 20, 20],
                },
                label: {
                    show: true,
                    position: "top",
                    distance: 0,
                    color: "#1ACDDC",
                    formatter: "{c}" + "",
                },
                data: [200, 85, 112, 275, 305, 415, 741],
            },
            {
                // name: '背景',
                type: "bar",
                barWidth: "15px",
                xAxisIndex: 0,
                yAxisIndex: 1,
                barGap: "-110%",
                data: [100, 100, 100, 100, 100, 100, 100], //背景阴影长度
                itemStyle: {
                    normal: {
                        color: "rgba(255,255,255,0.039)",
                        barBorderRadius: [20, 20, 20, 20],
                    },
                },
                tooltip: {
                    show: false,
                },
                zlevel: 9,
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myEcharts2.setOption(option);
}

function initChart3() {
    var myEcharts3 = echarts.init(document.getElementById('allconsumption'), "purple-passion");
    var xData = function () {
        var data = ["消防车", "消防车", "消防车", "消防车", "消防车", "消防车", "消防车"];
        // for (var i = 1; i < 13; i++) {
        //     data.push(i + "月份");
        // }
        return data;
    }();

    var option = {
        backgroundColor: "transparent",
        "title": {
            "text": "总体设备消耗详情",
            "subtext": "",
            x: "4%",

            textStyle: {
                color: '#fff',
                fontSize: '22'
            },
            subtextStyle: {
                color: '#90979c',
                fontSize: '16',

            },
        },
        "tooltip": {
            "trigger": "axis",
            "axisPointer": {
                "type": "shadow",
                textStyle: {
                    color: "#fff"
                }

            },
        },
        "grid": {
            "borderWidth": 0,
            "top": 110,
            "bottom": 95,
            textStyle: {
                color: "#fff"
            }
        },
        "legend": {
            x: '4%',
            top: '8%',
            textStyle: {
                color: '#90979c',
            },
            "data": ['已使用', '未使用', '总数']
        },


        "calculable": true,
        "xAxis": [{
            "type": "category",
            "axisLine": {
                lineStyle: {
                    color: '#90979c'
                }
            },
            "splitLine": {
                "show": false
            },
            "axisTick": {
                "show": false
            },
            "splitArea": {
                "show": false
            },
            "axisLabel": {
                "interval": 0,

            },
            "data": xData,
        }],
        "yAxis": [{
            "type": "value",
            "splitLine": {
                "show": false
            },
            "axisLine": {
                lineStyle: {
                    color: '#90979c'
                }
            },
            "axisTick": {
                "show": false
            },
            "axisLabel": {
                "interval": 0,

            },
            "splitArea": {
                "show": false
            },

        }],
        "dataZoom": [{
            "show": true,
            "height": 30,
            "xAxisIndex": [
                0
            ],
            bottom: 30,
            "start": 0,
            "end": 100,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
                color: "#d3dee5",

            },
            textStyle: {
                color: "#fff"
            },
            borderColor: "#90979c"


        }, {
            "type": "inside",
            "show": true,
            "height": 15,
            "start": 1,
            "end": 35
        }],
        "series": [{
            "name": "已使用",
            "type": "bar",
            "stack": "总量",
            "barMaxWidth": 35,
            "barGap": "10%",
            "itemStyle": {
                "normal": {
                    "color": "#036eb1",
                    "label": {
                        "show": true,
                        "textStyle": {
                            "color": "#fff"
                        },
                        "position": "inside",
                        formatter: function (p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            "data": [
                709,
                1917,
                2455,
                2610,
                1719,
                1433,
                1544,
            ],
        },

        {
            "name": "未使用",
            "type": "bar",
            "stack": "总量",
            "itemStyle": {
                "normal": {
                    "color": "#00e6ff",
                    "barBorderRadius": 0,
                    "label": {
                        "show": true,
                        "position": "inside",
                        formatter: function (p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            "data": [
                327,
                1776,
                507,
                1200,
                800,
                482,
                204,
            ]
        }, {
            "name": "总数",
            "type": "line",
            symbolSize: 10,
            symbol: 'circle',
            "itemStyle": {
                "normal": {
                    "color": "#2dafdfc2",
                    "barBorderRadius": 0,
                    "label": {
                        "show": true,
                        "textStyle": {
                            "color": "#fff"
                        },
                        "position": "top",
                        formatter: function (p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            "data": [
                1036,
                3693,
                2962,
                3810,
                2519,
                1915,
                1748,
            ]
        },
        ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myEcharts3.setOption(option);
}

var dates = ref([]);
// 获取该年该月共有多少天
function getDaysInYearMonth(year, month) {
    // 每一次进行更新前,先清空日期数组
    dates = [],
        month = parseInt(month, 10);
    // javascript中Date()对象的getDate()是获取时间对象对应于一个月中的某一天（1~31），当设置为0的时候，getDate()返回的就是最后一天，刚好对应我们需要的值。
    var date = new Date(year, month, 0);
    console.log(date.getDate())
    for (var i = 1; i <= date.getDate(); i++) {
        console.log(i)
        var obj = {
            id: '0' + i,
            text: i < 10 ? '0' + i : i
        }
        dates.push(obj)
    }
    console.log("dates", dates);
}

// 伸展内容容器高度
// var optionConH = ref(0);
// 控制旋转
// var rot = ref(0);
// var ischose = ref(false);
// 切换显示下拉选择区域
// function changeoption() {
//     if (!ischose.value) {
//         rot.value = 90;
//         optionConH.value = 500;
//     } else {
//         optionConH.value = 0;
//         rot.value = 0;
//     }
//     ischose.value = !ischose.value;
// }
</script>

<style scoped>
html,
body {
    position: relative;
    height: 100%;
}

.history-con {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    background: url(../src/assets/static/image/bg2.png) no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #1e2e49;
}

.bg {
    width: 100%;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    z-index: -1;
}

.head {
    position: fixed;
    top: 0;
    left: 0;
    background: url(../src/assets/static/image/head3.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 80.5px;
}

.head-title {
    text-align: center;
    font-size: 27.6px;
    line-height: 17.25px;
    color: rgb(95, 218, 255);
}

.plane {
    width: 575px;
    height: 460px;
}

.container {
    height: calc(100%-75px);
    margin-top: 75px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.small-title {
    height: 34.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 21.85px;
    background-color: rgba(36, 74, 126, 0.3);
}

.small-title-left {
    display: flex;
    align-items: center;
}

.bar {
    width: 11.5px;
    height: 34.5px;
    margin-right: 20px;
    box-shadow: 0 0 20px 10px #064574;
    background: linear-gradient(to bottom, #036eb1, #00f4f0);
}

.icon {
    width: 23px;
    height: 23px;
    margin-right: 23px;
}

/* 左边模块 */
.history-total {
    position: absolute;
    width: 467.75px;
    height: 230px;
    box-sizing: border-box;
    left: 5.75px;
    top: 103.5px;
}

.total-con {
    padding: 11.5px;
    height: 207px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.75px solid #036eb1;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.total-item {
    width: 161px;
    height: 230px;
    position: relative;
}

.total-item img {
    width: 161px;
    height: 149.5px;
    position: absolute;
    left: 0;
    top: 11.5px;
}

.total-item-value {
    font-size: 27.6px;
    position: absolute;
    font-weight: 600;
    color: #00b3f5;
    left: 55%;
    transform: translateX(-50%);
    top: 63.25px;
}

.total-item-title {
    position: absolute;
    color: #fff;
    bottom: 28.75px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 172.5px;
}

/* 趋势 */
.trend {
    position: absolute;
    width: 467.75px;
    height: 230px;
    box-sizing: border-box;
    left: 5.75px;
    top: 396.75px;
}

.trend-con {
    padding: 11.5px;
    height: 617.5px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
/* 中间信息模块 */
.info {
    position: absolute;
    width: 943px;
    height: 230px;
    box-sizing: border-box;
    /* left: 440px; */
    top: 103.5px;
    left: 50%;
    transform: translateX(-50%);
}

.info-con {
    padding: 11.5px;
    height: 910.75px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
}

.head-time {
    position: relative;
}

.head-time img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 575px;
    height: 46px;
}

.head-time-value {
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    line-height: 46px;
    font-size: 23px;
    font-weight: 600;
}

.thisdeplete {
    width: 517.5px;
    height: 460px;
    margin-top: 57.5px;
}

.thisdeplete-title {
    width: 207px;
    font-size: 20.7px;
    color: #fff;
    font-weight: 600;
    padding-bottom: 11.5px;
    border-bottom: 2.3px solid #00b3f5;
}

.info-con-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info-banel-title {
    width: 126.5px;
    font-size: 20.7px;
    color: #fff;
    font-weight: 600;
    padding-bottom: 11.5px;
    border-bottom: 2.3px solid #00b3f5;
}

.info-banel-con {
    margin-top: 11.5px;
    width: 391px;
    height: 339.25px;
}

.info-item {
    display: flex;
    color: #fff;
    margin-bottom: 11.5px;
}

.info-item-title {
    width: 110px;
    font-size: 20.7px;
}

.info-item-value {
    width: 264.5px;
    font-size: 20.7px;
    color: #00b3f5;
    font-weight: 600;
}

.info-item-text {
    width: 264.5px;
    overflow: hidden;
}

.info-text-value {
    font-size: 20.7px;
    font-weight: 600;
    color: #00b3f5;
    width: 284.35px;
    height: 150px;
    overflow: auto;
    overflow-y: scroll;
}

.option-con {
    height: 46px;
    background-color: rgba(36, 74, 126, 0.5);
    margin-top: 34.5px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.option-item {
    width: 110px;
    height: 34.5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;
    background-color: #2dafdfc2;
    border-radius: 23px;
    font-weight: 600;
    font-size: 20.7px;
    line-height: 34.5px;
    cursor: pointer;
}

.select {
    width: 23px;
    height: 23px;
    transition: all 0.5s;
}

.list-con {
    padding: 11.5px 23px;
    height: 230px;
    border-radius: 0 0 11.5px 11.5px;
    /* display: flex;
    align-items: center;
    justify-content: space-around; */
}

.lists {
    margin-top: 5.75px;
    overflow: hidden;
}

.list-main {
    width: 891.25px;
    height: 281.75px;
    overflow: auto;
    color: #fff;
    font-size: 20.7px;
    overflow-y: scroll;
}

.list-item {
    background-color: rgba(36, 74, 126, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    height: 34.5px;
    margin-bottom: 5px;
    /* border-bottom: 1px solid #00b3f5; */
}

.list-item-value {
    width: 207px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.list-title-item {
    display: flex;
    width: 150.65px;
    align-items: center;
    justify-content: center;
}

.item-icon {
    width: 34.5px;
    height: 34.5px;
    margin-right: 11.5px;
}

.option {
    margin: 0 auto;
    width: 57.5px;
    height: 28.75px;
    border-radius: 23px;
    font-size: 17.25px;
    text-align: center;
    color: #2d98be;
    line-height: 28.75px;
    background-color: rgba(36, 74, 126, 0.7);
}

.option:hover {
    background-color: #2d98be;
    color: #fff;
}
/* 右边模块 */
.allconsumption {
    position: absolute;
    width: 466.75px;
    height: 230px;
    box-sizing: border-box;
    right: 5.75px;
    top: 103.5px;
}
.allconsumption-con {
    padding: 11.5px;
    height: 442.75px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
}
.assess {
    position: absolute;
    width: 466.75px;
    height: 230px;
    box-sizing: border-box;
    right: 5.75px;
    top: 617.5px;
}

.assess-con {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 11.5px;
    height: 396.75px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
}
.fire-sum,.assess-sum {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.fire-sum-title,.assess-sum-title {
    color: #fff;
    font-size: 20.7px;
    font-weight: 600;
    width: 270.25px;
}
.fire-sum-value,.assess-sum-value {
    position: relative;
    color: #00b3f5;
    width: 172.5px;
    height: 172.5px;
}
.fire-sum-value img,.assess-sum-value img {
    position: absolute;
    border-radius: 50%;
    border: 2px solid #00b3f5;
    left: 0;
    top: 0;
    width: 172.5px;
    height: 172.5px;
}
.fire-sum-value .sum-value,.assess-sum-value .assess-value {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 69px;
    font-size: 27.6px;
    font-weight: 600;
}
.recommand {
    display: flex;
    align-items: center;
    color: #00b3f5;
    font-weight: 600;
}
</style>